i18n

Internationalisation des sites

Riviera Dev

Nicolas Hoffmann / @Nico3333fr

Mais Genève, c’est surtout…

Une capitale diplomatique
22 organisations internationales et plus de 250 organisations non gouvernementales (ONG)
Une ville cosmopolite
Bref, un excellent vivier pour l’internationalisation

Plan-Les… WHAAT?????

(on recrute, venez en discuter)

L’internationalisation ( = i18n ) des sites ?

Souvent cela fait peur…
… alors que c’est une destination exotique !
L’occasion de découvrir et d’apprendre

Mon objectif

Vous amener à réfléchir à ce sujet…
… vous éviter certaines gamelles (expérience :) )
Montrer que cela peut se faire à plusieurs vitesses
Voir comment cela impacte (tous) nos métiers…

Petit plan de bataille

Quelques fondamentaux
Côté créa/design
Côté inté/dév. front (avec du RTL et pas que)
Côté dév. back/fullstack
Côté contenus/CP
D'autres aspects

Quelques fondamentaux

UTF-8, sinon c’est la f�te ! Et le dÃ©sarroi ensuite.

La dette technique en exemple

Quelques fondamentaux

«L’attwibiou» lang !

Attention aux faux-amis : i18n Checker, W3c Validator, Language subtag lookup

Côté design

La question n’est pas de savoir si ça va varier en i18n, mais quand et comment !

=> faites des designs qui tolèrent les variations

Bref

De l’air et de la souplesse, que diable !
Lâchez prise
Attention aux éléments de graphisme qui vont changer
Vivent SVG ou les webfonts…

Webfonts, au fait…

Les accents avec la typo Bebas

Dis, ta typo-là…

Côté inté/dév. front

« Votre intégration doit tolérer la différence »

Utilisez le flux
Évitez les postulats et les chiffres magiques
KISS = Keep It Simple and Smart

Surqualité, danger !

q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
  quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019";
}
:lang(ja) > q {
  quotes: "\300c" "\300d" "\300e" "\300f";
}
q:before { content: open-quote; }
q:after { content: close-quote; }

Surqualité, danger !

Une citation en français

An english quote

日本の引用

Bien d’y penser, mais n’en faites pas trop !

Les sites en Right-To-Left

Inversion pas seulement des contenus…
mais du sens de lecture !

Toute notion gauche/droite ou suivant/précédent à prendre en compte

Exemple en LTR

(standup4humanrights)

Exemple en RTL

Autre exemple en LTR…

Exemple en RTL

RTL : plusieurs méthodes

CSS dédiée uniquement RTL/pour la surcharge RTL
Simple surcharge dans la même CSS

[dir="rtl"] .element { … }

RTL : en pratique

dir="rtl" sur html
float: left => float: right
Si spécifié, text-align à inverser
Absolu/fixé : left: 0;
=> right: 0; left: auto;

RTL : en pratique (suite)

Positionnements dans le flux (inline, inline-block, table-layout, flexbox, etc.) : no problemo !
Les animations !
margin/padding - left/right !
Attention aux helpers, aux surcharges, etc.